<template>
    <div class="search">
        <div class="container">
            <div class="logo">
                <img src="../../assets/images/main/logo.png" alt="">
            </div>
            <div class="search-content">
                <div class="box">
                    <div class="select">
                        <el-select v-model="searchType" :value="searchType">
                            <el-option label="学校" value="学校"></el-option>
                            <el-option label="职位" value="职位"></el-option>
                        </el-select>
                    </div>
                    <input type="text" class="search-input" placeholder="输入职位关键字，例如:幼儿美术，小学语文等">
                    <div class="search-btn">搜索</div>
                </div>
                <div class="remarks">
                    <p>热搜职位：幼儿英语&nbsp幼儿美术&nbsp小学语文&nbsp初中英语&nbsp初中数学&nbsp高中英语&nbsp钢琴老师</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MainSearch",
        data() {
            return {
                searchType: '职位'
            }
        }
    }
</script>

<style scoped lang="less">
    input::-webkit-input-placeholder{
        color: #BDBDBD;
    }
    .search /deep/ .el-input__inner {
        border: none;
        padding: 0 0 0 8px;
        height: 20px;
    }
    .search {
        width: 100%;
        background: #FCFCFC;
        .container {
            height: 123px;
            .logo{
                float: left;
                margin: 27px 0;
                width: 330px;
                height: 65px;
            }
            .search-content {
                float: right;
                margin: 27px 20px;
                width: 730px;
                height: 70px;
                .box {
                    width: 100%;
                    height: 40px;
                    border: 1px solid #E61F1F;
                    display: flex;
                    background: #fff;
                    .select {
                        width: 65px;
                        font-size: 15px;
                        text-align: center;
                        line-height: 40px;
                        border-right: 1px solid #CCCCCC;
                        cursor: pointer;
                    }
                    .search-input {
                        flex: 1;
                        height: 100%;
                        margin: 0 20px;
                        box-sizing: border-box;
                        border: none;
                        padding: 0 ;
                        outline:none;
                    }
                    .search-btn {
                        text-align: center;
                        width: 110px;
                        line-height: 40px;
                        background: #E61F1F;
                        color: #fff;
                        font-size: 15px;
                        cursor: pointer;
                    }
                }
                .remarks {
                    margin-top: 10px;
                    p {
                        text-align: left;
                        font-size: 12px;
                        color: #A2A2A2;
                    }
                }
            }
        }
    }
</style>
